<template>
  <div id="EditArticle">
    <TabBar></TabBar>

<!--    markdown编辑器-->
    <div class="editor" id="markdown-editor-div" v-if="editorType">
      <MarkDownEditor @editorTypeChange="editorTypeChange"></MarkDownEditor>
    </div>
<!--    富文本编辑器-->
    <div id="rich-editor-div" class=" editor" v-else>
      <RichTextEditor @editorTypeChange="editorTypeChange"></RichTextEditor>
    </div>

<!--    <el-card-->
<!--        id="show-card"-->
<!--        shadow="hover"-->
<!--        v-html="html"-->
<!--        class=" markdown-body">-->
<!--    </el-card>-->

  </div>
</template>

<script>
import TabBar from "../components/tabbar/TabBar";
import RichTextEditor from "../components/editor/richtexteditor/RichTextEditor";
import MarkDownEditor from "../components/editor/markdowneditor/MarkDownEditor";
export default {
  name: "EditArticle",
  data(){
    return{
      markdownText:'',
      html:'',
      editorType:true,
    }
  },
  computed:{
  },
  methods:{
    editorTypeChange(){
      this.editorType = !this.editorType
    }
  },
  components:{
    TabBar,
    RichTextEditor,
    MarkDownEditor
  }
}
</script>

<style scoped>
@import "~github-markdown-css";
  .black-border{
    border: 2px solid black;
  }
  .editor{
    width: 1500px;
    min-height: 800px;
    height: fit-content;
    margin: 10px auto;

  }
  #EditArticle{
    text-align: center;

  }
  #select-editor-div{
    width: 500px;
    height: 100px;
    margin: 0 auto;
  }
@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
  #file-div{
    width: 1200px;
    height: 150px;
    margin: 0 auto;
  }
  #show-card{
    margin: 0px auto;
    padding: 30px;
    width: 1024px;
    height: fit-content;
    text-align: left;
    z-index: 1;
    background: #f8f8f8
  }

/*rgb(51, 51, 51);*/
</style>